<template>
  <a-modal v-model="dialog" :close-on-click-modal="false" title="角色选择" append-to-body top="5vh" width="60%">
    <a-table ref="table" size="small" :bordered="true" :pagination="pagination" rowKey="id" :columns="columns" :dataSource="data"  :rowSelection="rowSelection" @change="getData">
    </a-table>
    <div slot="footer" class="dialog-footer">
      <a-button type="text" @click="cancel">取消</a-button>
      <a-button type="primary" @click="doSubmit">确认</a-button>
    </div>
  </a-modal>
</template>

<script>


  export default {
    name: 'RoleSelect',
    props: {

    },
    data() {
      return {
        selectedRows: [],
        selectedKeys:[],
        dialog: false,
        multiple:true,
        queryParam:{
          account:'',
          name:''
        },
        pagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        columns: [
          {
            title: 'ID',
            dataIndex: 'id'
          },
          {
            title: '角色名称',
            dataIndex: 'name'
          }
        ],
        data: [{
          id: 'ROLE_NQBZ',
          name: '内勤部长'
        },{
          id: 'ROLE_KJ',
          name: '会计'
        }, {
          id: 'ROLE_CWBZ',
          name: '财务部长'
        }, {
          id: 'ROLE_ZJL',
          name: '总经理'
        }, {
          id: 'ROLE_CN',
          name: '出纳'
        }, {
          id: 'ROLE_CGBZ',
          name: '采购部长'
        }]
      }
    },
    computed: {
      rowSelection() {
        return {
          hideDefaultSelections:true,
          selectedRowKeys:this.selectedKeys,
          type:this.multiple?'checkbox':'radio',
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedKeys = selectedRowKeys
            this.selectedRows=selectedRows
          }
        };
      },
    },
    methods: {
      cancel() {
        this.selectedRows = []
        this.dialog = false
      },
      show(){
        this.getData()
        this.dialog=true;
      },
      getData(pagination, filters, sorter) {
        if(pagination)
        {
          this.pagination = pagination;
        }
        let param = Object.assign({}, this.queryParam, this.sorter ,this.filters);
        param.page = this.pagination.current;
        param.rows = this.pagination.pageSize;
        this.http.get(this, {
          url: this.api.process.groupList,
          data:param,
          success: function (me, data) {
            me.data=data.rows
          }
        })
      },
      doSubmit() {
        this.$emit('callback', this.selectedRows,this.selectedKeys)
        this.cancel()
      }
    }
  }
</script>

<style scoped>

</style>
